/**
  author : sailing
  date : 2016-10-21
  fun: button
***/

<style lang="less">
  .vx-panel{
      width:400px;
      background:#f7f7f7;
      left:50%;
      z-index:2500;
      top:80px;
      box-shadow: 1px 2px 2px #ccc;
      min-height:100px;
      margin-left:-200px;
      border-radius:10px;
      position:absolute;
      
  }

  .shadow-bg{
    position:absolute;
    width:100%;
    height:100%;
  }

  .musicPanel{
    min-height:50px;
    position:relative;
    padding-right:10px;
    padding-left:10px;
    .uploadPanel{
      max-height:400px;
      overflow-y:scroll;
      overflow-x:hidden;
      min-height:400px;
      text-align:center;
      text-align:center;
      .showImg{
        display: block;
        margin-top:20px;
        height:80px;
        margin-left:20px;
      }

      .lineEdges{
        height: 40px;
        line-height:40px;
      }
      tr{
        height:40px;
        line-height:40px;
      }

      label{
        display:inline-block;
        width:100px;
        text-align:right;
      }
      .line{
        margin-top:10px;
        min-height:40px;
        margin-bottom:10px;
        .inputStyle{
          width:200px;
        }
      }

      .line.marginL{
        margin-left:20px;
      }
    }
  }
</style>

<template>

  <transition name="fadeIn">
  <div v-show="isShow">
    <div class="shadowDiv_all">
    </div>
    <div class="vx-panel" v-show="isShow">
      <musicPanelHeader text="连线选择"></musicPanelHeader>
      <div class="musicPanel">
        <ul class="uploadPanel">
          <li>
            <table style="width:100%">
                <tr>
                  <td>
                    序号
                  </td> 
                  <td>
                    端口1
                  </td> 
                  <td>
                    端口2
                  </td> 
                  <td>
                    选择
                  </td> 
                </tr>
              <tbody style='width:100%'>
                <tr v-for = "(edges, index) in portEdges">
                  <td>
                    {{index}}
                  </td>
                  <td>
                    {{edges.data.s_port}}
                  </td> 
                  <td>
                    {{edges.data.e_port}}
                  </td>
                  <td>
                    <el-radio class="radio" v-model="radio" :label="index">选择</el-radio>
                  </td>  
                </tr>
              </tbody>
              
            </table>
          </li>
        </ul>
      </div>
      <musicPanelfoter></musicPanelfoter>
    </div>
  </div>
  </transition>
</template>

<script>
import musicPanelHeader from '../panel/panel_header'
import musicPanelfoter from '../panel/panel_foter'
import eventBus from '../../eventBus'
import data from '../../server/data'
export default {
  data () {
    return {
      isShow: false,
      portEdges: [],
      radio: ''
    }  
  },
  methods: {
    clickBnt (e, id) {
      console.log('dddddddddddddddddddddddd')
    },
    clickClose () {
    },
    submitBnt (e) {
      this.isShow = false
      if (this.radio === '') {
        return
      }
      data.cy.add({
        group: 'edges',
        data: this.portEdges[this.radio].data
      })
    },
    musicChange (e) {
    },
    picChange (e) {
    },
    cancelBnt (e) {
      this.isShow = false
    }
  },
  mounted () {
    const that = this
    eventBus.bus.$on('startWin', function (param) {
      // that.isShow = true
    })
    eventBus.bus.$on('drawLine', function (param) {
      // that.portEdges = param.edges
    })
  },
  props: {
    bg: String,
    text: String
  },
  components: {musicPanelfoter, musicPanelHeader}
}
</script>